<template>
  <Field
    :border="border"
    v-if="showType === 'edit'"
    :name="name"
    :label="label"
    :labelWidth="labelWidth"
    :disabled="disabled"
    :rules="rules"
  >
    <template #input>
      <div v-if="list.length">
        <van-checkbox-group
          v-model="currentValue"
          @input="inputHandler"
          v-if="viewType === undefined"
          @change="$emit('change', currentValue, name)"
          :direction="direction"
        >
          <van-checkbox
            :name="o.value"
            v-for="(o,i) of list"
            :key="i"
            :shape="shape"
            class="van-checkbox-item"
          >{{o.label}}</van-checkbox>
        </van-checkbox-group>
        <div v-else-if="viewType === `button`">
          <van-button
            :name="o.value"
            v-for="(o,i) of list"
            :key="i"
            :type="currentValue.includes(o.value) ? `info` : ``"
            size="small"
            class="check-button"
            @click.prevent="checkItem(o.value, i)"
          >{{o.label}}</van-button>
        </div>
      </div>
      <van-checkbox
        v-else
        v-model="currentValue"
        @change="$emit('change', currentValue, name)"
        :shape="shape"
      />
    </template>
  </Field>
  <Field
    :border="border"
    v-else-if="showType === 'view'"
    :name="name"
    :readonly="true"
    :value="viewValueFn(currentValue)"
    :label="label"
    :labelWidth="labelWidth"
    type="input"
  >
    <template #button>
      <slot></slot>
    </template>
  </Field>
</template>

<script>
import common from './item'
import { Checkbox, CheckboxGroup, Button as vanButton } from 'vant'
export default {
  mixins: [common],
  components: {
    vanCheckbox: Checkbox,
    vanCheckboxGroup: CheckboxGroup,
    vanButton
  },
  computed: {
    // checkbox、radio组的排列方式
    direction () {
      let o = this.info
      return o.direction || 'horizontal' // 'vertical'
    },
    // icon形状
    shape () {
      let o = this.info
      return o.shape || 'square'
    },
    // 全选：list的index位置
    checkedAll () {
      let o = this.info
      return o.checkedAll
    },
    // 多选展示样式：原生或按钮状态 [undefined | button]
    viewType () {
      let o = this.info
      return o.viewType
    }
  },
  created () {
    if (this.showType === 'view') {
      let o = this.list.filter(o => this.value.includes(o.value))
      this.currentValue = o.length ? o.map(o => o.label) : ''
    }
  },
  methods: {
    inputHandler (v) {
      // 处理全选逻辑
      if (this.checkedAll !== undefined) {
        let checkAllValue = this.list[this.checkedAll].value
        let len = v.length
        // 点击全选：值为全选
        if (v[len - 1] === checkAllValue) {
          this.currentValue = [checkAllValue]
          return
        }
        // 点击其他：值里没有全选
        if (v[0] === checkAllValue) {
          this.currentValue.splice(0, 1)
        }
      }
    },
    checkItem (v) {
      let i = this.currentValue.findIndex(o => o === v)
      if (i > -1) {
        this.currentValue.splice(i, 1)
      } else {
        this.currentValue.push(v)
      }
    }
  }
}
</script>

<style lang="css" scoped>
.van-checkbox-item {
  margin-bottom: 5px;
}
.check-button {
  margin-right: 8px;
  margin-bottom: 8px;
  min-width: 80px;
}
</style>
